<template>
    <div>
        <div class="main" id="main">

        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue'
onMounted(() => {
    let myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
        title: {
            text: '流量统计图'
        },
        tooltip: {},
        xAxis: {
            data: ['10.8', '10.9', '10.1', '10.2', '10.3', '10.4']
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                barWidth: 10,
                data: [{
                    value: 50, itemStyle: {
                        color: '#32bbea'
                    }
                }, {
                    value: 200, itemStyle: {
                        color: '#32bbea'
                    }
                }, {
                    value: 300, itemStyle: {
                        color: '#32bbea'
                    }
                }, {
                    value: 100, itemStyle: {
                        color: '#32bbea'
                    }
                }, {
                    value: 150, itemStyle: {
                        color: '#32bbea'
                    }
                }, {
                    value: 200, itemStyle: {
                        color: '#32bbea'
                    }
                }]
            }
        ]
    });
    // console.log(document.querySelector('#main'));

})
</script>
<style lang="scss" scoped>
.main {
    height: pxfn(344) !important;
    width: 100%;
}

.canvas {
    height: pxfn(344) !important;
    width: 100%;
}
</style>